<template>
	<view class="index">
		<view class="cf bs6 p-15-10 mb10" :style="{background:subColor}">
			<view class="mb10" :style="{height:(more_height+'rpx'),overflow:'hidden'}">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in list3" :key="listIndex">
						<view class="p-10-0 tac grid c0">
							<view class="grid-text f12 mb5">{{listItem.title}}</view>
							<!-- <view v-if="(listIndex+1)%3!==0" class="br"></view> -->
							<text class="f14 wei">{{listItem.num}}</text>
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="f-c-b c0 f12 p5" @click="more">
				<text class="mr5">{{text}}</text>
				<u-icon size="14" color="#000" :name="more_name" style="line-height: 56rpx;"></u-icon>
			</view>
		</view>
		<view class="p10 f18 wei6">订单来源</view>
		<view class="topList">
			<uni-table ref="table" border stripe emptyText="暂无明细">
				<uni-tr>
					<uni-th align="center">来源</uni-th>
					<uni-th align="center">营业额</uni-th>
					<uni-th align="center">营业收入</uni-th>
					<uni-th align="center">支出金额</uni-th>
					<uni-th align="center">有效订单数</uni-th>
					<uni-th align="center">退款订单数</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in summary" :key="i">
					<uni-td align="center">{{ row.name }}</uni-td>
					<uni-td align="center">{{ row.sellMoney }}</uni-td>
					<uni-td align="center">{{ row.money }}</uni-td>
					<uni-td align="center">{{ row.discountMoney }}</uni-td>
					<uni-td align="center">{{ row.orderCount }}</uni-td>
					<uni-td align="center">{{ row.refundOrder }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="f-bt mt20">
			<view class="tjTab flex f-nw">
				<view class="tjTabs p-10-15 f13 c0" :class="{'xztab' : tjtabs == i}" v-for="(v,i) in tjTab" :key="i"
					@click="changeCTab(v,i)">
					{{v.name}}
				</view>
			</view>
		</view>
		<view class="mt20" v-if="tjv==1">
			<view class="charts-box">
				<qiun-data-charts :canvas2d='true' type="ring" :opts="optbox1" :chartData="chartData1" />
			</view>
			<uni-table ref="table" border stripe emptyText="暂无明细">
				<uni-tr>
					<uni-th align="center">支付方式</uni-th>
					<uni-th align="center">营业收入</uni-th>
					<uni-th align="center">支付笔数</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in payTrend" :key="i">
					<uni-td align="center">{{ row.name }}</uni-td>
					<uni-td align="center">{{ row.money }}</uni-td>
					<uni-td align="center">{{ row.orderCount }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="mt20" v-if="tjv==2">
			<view class="charts-box">
				<qiun-data-charts :canvas2d='true' type="pie" :opts="optbox2" :chartData="chartData2" />
			</view>
			<uni-table ref="table" border stripe emptyText="暂无明细">
				<uni-tr>
					<uni-th align="center">支出方式</uni-th>
					<uni-th align="center">支出金额</uni-th>
					<uni-th align="center">支出笔数</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in discountTrend" :key="i">
					<uni-td align="center">{{ row.name }}</uni-td>
					<uni-td align="center">{{ row.discountMoney }}</uni-td>
					<uni-td align="center">{{ row.orderCount }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="mt20" v-if="tjv==3">
			<view class="charts-box">
				<qiun-data-charts  :canvas2d='true' type="pie" :opts="optbox2" :chartData="chartData3" />
			</view>
			<uni-table ref="table" border stripe emptyText="暂无明细">
				<uni-tr>
					<uni-th align="center">订单类型</uni-th>
					<uni-th align="center">营业收入</uni-th>
					<uni-th align="center">有效订单</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in orderTrend" :key="i">
					<uni-td align="center">{{ row.name }}</uni-td>
					<uni-td align="center">{{ row.money }}</uni-td>
					<uni-td align="center">{{ row.orderCount }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="mt20" v-if="tjv==4">
			<view class="charts-box">
				<qiun-data-charts  :canvas2d='true' type="pie" :opts="optbox2" :chartData="chartData4" />
			</view>
			<uni-table ref="table" border stripe emptyText="暂无明细">
				<uni-tr>
					<uni-th align="center">类别名称</uni-th>
					<uni-th align="center">商品销量</uni-th>
					<uni-th align="center">商品销售额</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in goodsCat" :key="i">
					<uni-td align="center">{{ row.name }}</uni-td>
					<uni-td align="center">{{ row.sales }}</uni-td>
					<uni-td align="center">{{ row.money }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="mt20" v-if="tjv==5">
			<view class="charts-box">
				<qiun-data-charts  :canvas2d='true' type="line" :opts="opts" :chartData="chartData5" />
			</view>
		</view>
		<view class="mt20" v-if="tjv==6">
			<view class="charts-box">
				<qiun-data-charts  :canvas2d='true' type="pie" :opts="optbox2" :chartData="chartData6" />
			</view>
			<uni-table ref="table" border stripe emptyText="暂无明细">
				<uni-tr>
					<uni-th align="center">订单类型</uni-th>
					<uni-th align="center">营业收入</uni-th>
					<uni-th align="center">订单数</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in sellOut" :key="i">
					<uni-td align="center">{{ row.name }}</uni-td>
					<uni-td align="center">{{ row.money }}</uni-td>
					<uni-td align="center">{{ row.orderCount }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!-- <view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				list3: [{
					num: '0.00',
					title: '营业额'
				}, {
					num: '0.00',
					title: '营业收入'
				}, {
					num: '0.00',
					title: '支出金额'
				}, {
					num: '0',
					title: '有效订单数'
				}, {
					num: '0',
					title: '储值金额'
				}, {
					num: '0.00',
					title: '退款金额'
				}, {
					num: '0',
					title: '包装费'
				}, {
					num: '0',
					title: '配送费'
				}, {
					num: '0',
					title: '营业收入(含服务费)'
				}, ],
				newData: {},
				summary: [],
				payTrend: [],
				discountTrend: [],
				sellOut: [],
				orderTrend: [],
				goodsCat: [],
				text: '展开全部',
				more_name: 'arrow-down',
				more_height: 140,
				tjtabs: 0,
				tjv: 1,
				tjTab: [{
						name: '支付渠道',
						value: 1,
					},
					{
						name: '支出统计',
						value: 2,
					},
					{
						name: '订单统计',
						value: 3,
					},
					{
						name: '商品分类',
						value: 4,
					},
					{
						name: '时段统计',
						value: 5,
					},
					{
						name: '营业外金额',
						value: 6,
					}
				],
				optbox1: {
					rotate: false,
					rotateLock: false,
					color: ["#FAC858", "#91CB74", "#4275F4", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "营业收入",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "0",
						fontSize: 25,
						color: "#FC8452"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartData1: {
					series: [{
						data: [{name: '暂无数据',value: 0}]
					}]
				},
				optbox2: {
					color: ["#4275F4", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartData2: {
					series: [{
						data: [{name: '暂无数据',value: 0}]
					}]
				},
				chartData3: {
					series: [{
						data: [{name: '暂无数据',value: 0}]
					}]
				},
				chartData4: {
					series: [{
						data: [{name: '暂无数据',value: 0}]
					}]
				},
				chartData5: {},
				chartData6: {
					series: [{
						data: [{name: '暂无数据',value: 0}]
					}]
				},
				queryForm: {
					timeType: 2,
					scene: '',
					pageNo: 1,
					pageSize: 10,
				},

				chartData: {},
				opts: {
					color: ["#4275F4", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						rotateLabel: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						}
					},
				},
			}
		},
		methods: {
			async fetchNewOrder(q) {
				if(q.startTime && q.endTime){
					this.queryForm.startTime = q.startTime
					this.queryForm.endTime = q.endTime
					this.queryForm.timeType = 1
				}else{
					this.queryForm.timeType = q.timeType
				}
				const {
					data
				} = await this.beg.request({
					url: this.api.sNewOrder,
					data: this.queryForm,
				})
				this.list3[0].num = data.sellMoney
				this.list3[1].num = data.money
				this.list3[2].num = data.discountMoney
				this.list3[3].num = data.orderCount
				this.list3[4].num = data.storedValueMoney
				this.list3[5].num = data.refundMoney
				this.list3[6].num = data.boxMoney
				this.list3[7].num = data.deliveryMoney
				this.list3[8].num = data.money
				this.newData = data
				this.summary = data.summary ? data.summary : []
				this.payTrend = data.payTrend ? data.payTrend : []
				this.discountTrend = data.discountTrend
				this.sellOut = data.sellOut
				this.orderTrend = data.orderTrend
				this.goodsCat = data.goodsCat
				this.getServerData(data)
			},
			getServerData(d) {
				if (this.tjv == 1 && d.payTrend && d.payTrend.length) {
					let series = d.payTrend.map(v => ({
						name: v.name,
						value: +v.money,
					}))
					series.shift()
					setTimeout(() => {
						this.optbox1.subtitle.name = d.payTrend[0].money
						let res = {
							series: [{
								data: series
							}]
						}
						this.chartData1 = JSON.parse(JSON.stringify(res));
					}, 500)
				} else if (this.tjv == 2 && d.discountTrend && d.discountTrend.length) {
					let series = d.discountTrend.map(v => ({
						name: v.name,
						value: +v.money,
					}))
					series.shift()
					setTimeout(() => {
						let res = {
							series: [{
								data: series
							}]
						}
						this.chartData2 = JSON.parse(JSON.stringify(res));
					}, 500)
				} else if (this.tjv == 3 && d.orderTrend && d.orderTrend.length) {
					let series = d.orderTrend.map(v => ({
						name: v.name,
						value: +v.money,
					}))
					series.shift()
					setTimeout(() => {
						let res = {
							series: [{
								data: series
							}]
						}
						this.chartData3 = JSON.parse(JSON.stringify(res));
					}, 500)
				} else if (this.tjv == 4 && d.goodsCat && d.goodsCat.length) {
					let series = d.goodsCat.map(v => ({
						name: v.name,
						value: +v.money,
					}))
					setTimeout(() => {
						let res = {
							series: [{
								data: series
							}]
						}
						this.chartData4 = JSON.parse(JSON.stringify(res));
					}, 500)
				} else if (this.tjv == 5 && d.hourTrend && d.hourTrend.length) {
					let series = d.hourTrend.map(v => ({
						name: v.name,
						value: +v.money,
					}))
					setTimeout(() => {
						let res = {
							categories: d.hourTrend.map(v => (v.name)),
							series: [{
								name: "统计金额",
								data: series
							}]
						}
						this.chartData5 = JSON.parse(JSON.stringify(res));
					}, 500)
				} else if (this.tjv == 6 && d.sellOut && d.sellOut.length) {
					let series = d.sellOut.map(v => ({
						name: v.name,
						value: +v.money,
					}))
					series.shift()
					setTimeout(() => {
						let res = {
							series: [{
								data: series
							}]
						}
						this.chartData6 = JSON.parse(JSON.stringify(res));
					}, 500)
				}
			},
			more() {
				if (this.more_height === 140) {
					this.more_height = 400
					this.text = '收起'
					this.more_name = 'arrow-up'
				} else {
					this.more_height = 140
					this.text = '展开全部'
					this.more_name = 'arrow-down'
				}
			},
			changeCTab(v, i) {
				this.tjtabs = i
				this.tjv = v.value
				this.fetchNewOrder(this.queryForm)
			},
			// getServerData() {
			// 	setTimeout(() => {
			// 		let res = {
			// 			categories: this.budata.moneyTrend.day,
			// 			series: [{
			// 					name: "订单支付金额",
			// 					data: this.budata.moneyTrend.value
			// 				},

			// 			]
			// 		};
			// 		this.chartData = JSON.parse(JSON.stringify(res));
			// 	}, 500);
			// },
			toEdit(v) {
				uni.navigateTo({
					url: '/pages/home/data/edit?item=' + encodeURIComponent(JSON.stringify(v))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-grid-item {
		// border-bottom: 1px solid #cbcbcb !important;
	}

	.grid {
		position: relative;
		width: 100%;
		height: 100%;

		.br {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 2rpx;
			height: 55rpx;
			background-color: #cbcbcb;
		}
	}

	.tjTab {
		border: 1px solid #FDDA34;
		border-right: none;
		border-radius: 4px;
		overflow-x: scroll;
		white-space: nowrap;

		.tjTabs {
			display: inline-block;
			border-right: 1px solid #FDDA34;
			color: #333;
			background: #fff;
		}

		.xztab {
			background: #FDDA34;
			color: #000;
			font-weight: bold;
		}
	}
	
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>